<template>
	<view>
		<head-goods-search :is_search="false" title="资讯" @sendSearch="sendSearch"></head-goods-search>
		<view class="reputation-container">
			<view class="reputation-list">
				<view v-for="(item,index) in newList" class="li" :key="index"  @click="navigateTo('./details?id='+item.id)">
					<image :src="item.logo"/> 	
					<view class="reputation-desc">
						<view class="h3">{{item.title}}</view>
						<view class="p">{{item.remark}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fgb">
			<paging :total="count" activecolor="#fff" activebackground="#fd8197" :pageSize='pagesize'  :current="page" @changes="dd"></paging>
			<sales leftTitle="销量排行榜" rightTitle="新品上市" :leftList="leftList" :rightList="rightList"></sales>
			<view class="follow-contanier">
				<view class="h3">资讯排行</view>
				<view class="follow-list">
					<view class="li" @click="navigateTo('./details?id='+item.id)" v-for="(item,index) in rankingNewsList" :key="index">{{item.title}}</view>
				</view>
			</view>
			<view class="follow-contanier">
				<view class="h3">最新资讯</view>
				<view class="follow-list">
					<view class="li" @click="navigateTo('./details?id='+item.id)" v-for="(item,index) in latestNewsList" :key="index">{{item.title}}</view>
				</view>
			</view>
		</view>
		<foot-bottom></foot-bottom>
		<fab :topBtn="isTopBtn"></fab>
	</view>
</template>

<script>
	import fab from '@/components/fab'; //快捷菜单
	import footBottom from '@/components/footBottom'; //公共底部
	import { newsList,IndexNews } from '@/api/news';
	import { getNews,SiteIndexNews } from '@/api/shop';
	import paging from '@/components/yang-paging/fy.vue'
	export default {
	    data() {
			return{
				isTopBtn:false,
				newList:[],
				page:1,
				pagesize:9,
				count:null,
				goodsId:'',
                leftList:[],
                rightList:[],
                latestNewsList:[],
                rankingNewsList:[],
                keywords:''
			}
		},
		components:{
			fab,
			footBottom,
			paging
		},
		onPageScroll(e){
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
			}
		},
		onLoad(e){
			if(e.id){
				this.goodsId =e.id;
				this.getNews(this.page,this.goodsId,this.keywords )
                SiteIndexNews(e.id).then((res)=>{
                    this.leftList = res.data.datas.salesGoodsList;
                    this.rightList = res.data.datas.latestGoodsList;
                    this.rankingNewsList=res.data.datas.rankingNewsList;
                    this.latestNewsList = res.data.datas.latestNewsList;
                })
			}else{
				this.getList(this.page,this.keywords )
                IndexNews().then((res)=>{
                    this.leftList = res.data.datas.salesGoodsList;
                    this.rightList = res.data.datas.latestGoodsList;
                    this.rankingNewsList=res.data.datas.rankingNewsList;
                    this.latestNewsList = res.data.datas.latestNewsList;
                })
			}
		},
		methods:{
            sendSearch(k){
              this.keywords = k;
              if(this.goodsId){//店铺
              	this.getNews(this.page,this.goodsId,this.keywords)
              }else{ //主站
              	this.getList(this.page,this.keywords)
              }
            },
			getList(page,k){
				newsList(page,this.pagesize,k).then((res)=>{
					this.newList=res.data.datas;
					this.count = res.data.count;
				})
			},
			getNews(page,id,k){
				getNews(page,this.pagesize,id,k).then((res)=>{
					this.newList=res.data.datas;
					this.count = res.data.count;
				})
			},
			dd(index){
				this.page=index;
				if(!this.goodsId){
					newsList(this.page,this.pagesize,this.keywords).then((res)=>{
						this.newList=res.data.datas;
					})
				}else{
					getNews(this.page,this.pagesize,this.goodsId,this.keywords).then((res)=>{
						this.newList=res.data.datas;
					})
				}
			},
			trigger(e){
				uni.redirectTo({
				    url: e.item.url
				}); 
			},
			navigateTo(url){
				uni.navigateTo({
				    url: url
				});
			}
		}
	}
</script>

<style lang="scss">
	.reputation-container{
		margin-top:110rpx;
		background: #fff;
		.li{
			padding:20rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #d1d1d1;
			image{
				width:240rpx;
				height:240rpx;
			}
			.reputation-desc{
				width:450rpx;
				.h3{
					color:#333;
					font-size:28rpx;
					margin-bottom:10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical; 
					-webkit-line-clamp:2; 
					line-height: 20px;
				}
				.p{
					color:#858585;
					font-size:28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical; 
					-webkit-line-clamp:4; 
				}
				.timer{
					display: flex;
					justify-content: space-between;
					h4,time{
						color:#343434;
						font-size:28rpx;
						margin-top:10rpx;
					}
				}
				&>.h4{
					text-align: right;
					color:#343434;
					margin-top:10rpx;
					font-size:28rpx;
				}
			}
		}
	}
	.fgb{
		background: #fff;
		overflow: hidden;
		margin-bottom:30rpx;
	}
	.reputation-menu{
		display: flex;
		justify-content:space-between;
		li{
			width:50%;
			text-align: center;
			color:#343434;
			font-size:16px;
			padding:20rpx 0;
			border-bottom:1px solid #eee;
			&.active{
				color:#FF273F;
			}
		}
	}
	.reputation-rote-list{
		padding-bottom:20rpx;
		li{
			display: flex;
			justify-content: space-between;
			width:720rpx;
			margin:0 auto;
			margin-top:20rpx;
			img{
				width:150rpx;
				height:150rpx;
			}
			div{
				width:550rpx;
				h3{
					color:#343434;
					font-size:28rpx;
					margin-bottom:10rpx;
					span{
						color:#fd8197;
					}
				}
				p{
					color:#999;
					font-size:28rpx;
					line-height: 22px;
					overflow: hidden;
					text-overflow: ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical; 
					-webkit-line-clamp:2; 
				}
				.rote{
					display: flex;
					justify-content: flex-start;
					color:#343434;
					i{
						color:#ec495e;
						&:nth-of-type(1){
							margin-left:4px;
						}
					}
				}
			}
		}
	}
	.follow-contanier{
		width:720rpx;
		margin:0 auto;
		margin-top:20rpx;
		margin-bottom:30rpx;
		.h3{
			color:#343434;
			font-size:28rpx;
			margin-bottom:10rpx;
			font-weight:bold;
		}
		.follow-list{
			.li{
				font-size:28rpx;
				color:#666;
				border-bottom:1px solid #eee;
				padding:16rpx 0;
			}
		}
	}
</style>
